/**
 * 学习目标：使用受控组件，实现双向绑定的效果
 * 类似：vue中v-model， :value, @input
 * 用处：收集用户输入的内容
 * 两个关键点：
 *  1. 表单元素的值，由state控制
 *  2. onChange配合setState修改state的值
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    text: 'react',
  };

  handleChange = (e) => {
    console.log('e -----> ', e);
    this.setState({ text: e.target.value });
  };
  render() {
    return (
      <div>
        {/* 通过this.state和input关联，那么input就受到state的控制，成了受控组件 */}
        <input
          type="text"
          value={this.state.text}
          // react 对表单修改做了统一封装，所有改变的方法都叫 👍 onChange，方便用户使用
          // onChange={this.handleChange}
          // 也可以直接调用
          onChange={(e) => this.setState({ text: e.target.value })}
          // 真正的原生事件，应该是 onInput，👎不推荐使用
          // onInput={this.handleChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
